/*===============  BREAKPOINTS ===============*/
/* For small devices */
@media screen and (max-width: 320px) {
  .container {
    margin-left: var(--mb-1);
    margin-right: var(--mb-1);
  }

  .home {
    &-img {
      height: 200px;
    }
    &-buttons {
      flex-direction: column;
      width: max-content;
      row-gap: 1rem;
    }
  }

  .category-container,
  .trick-container {
    grid-template-columns: 0.8fr;
    justify-content: center;
  }
}

/* For medium devices */
@media screen and (min-width: 576px) {
  .about-container {
    grid-template-columns: 0.8fr;
    justify-content: center;
  }
  .newsletter {
    &-container {
      display: grid;
      grid-template-columns: 0.7fr;
      justify-content: center;
    }
    &-description {
      padding: 0 3rem;
    }
  }
}

@media screen and (min-width: 767px) {
  body {
    margin: 0;
  }

  .section {
    padding: 7rem 0 2rem;
  }

  .nav {
    height: calc(var(--header-height) + 1.5rem);

    &-img,
    &-close,
    &-toggle {
      display: none;
    }

    &-list {
      flex-direction: row;
      column-gap: 3rem;
    }
    &-link {
      text-transform: initial;
      font-weight: initial;
    }
  }

  .home {
    &-content {
      padding: 8rem 0 2rem;
      grid-template-columns: repeat(2, 1fr);
      gap: 4rem;
    }
    &-img {
      height: 300px;
    }
  }

  .swiper-pagination {
    margin-top: var(--mb-2);
  }

  .category {
    &-container {
      grid-template-columns: repeat(3, 200px);
      justify-content: center;
    }
  }

  .about {
    &-container {
      grid-template-columns: repeat(2, 1fr);
      align-items: center;
    }
    &-title,
    &-data {
      text-align: initial;
    }
    &-img {
      width: 250px;
    }
  }

  .trick {
    &-container {
      grid-template-columns: repeat(3, 200px);
      justify-content: center;
      gap: 2rem;
    }
  }

  .discount {
    &-container {
      grid-template-columns: repeat(2, max-content);
      justify-content: center;
      align-items: center;
      column-gap: 3rem;
      padding: 3rem 0;
      border-radius: 3rem;
    }
    &-img {
      width: 350px;
      order: -1;
    }
    &-data {
      padding-right: 6rem;
    }
  }

  .newsletter-container {
    grid-template-columns: 0.5fr;
  }

  .footer {
    &-container {
      grid-template-columns: repeat(4, 1fr);
      justify-items: center;
      column-gap: 1rem;
    }
    &-img-two {
      right: initial;
      bottom: 0;
      left: 15%;
    }
  }
}

/* For large devices */
@media screen and (min-width: 992px) {
  .container {
    margin-left: auto;
    margin-right: auto;
  }

  .section-title {
    font-size: var(--h1-font-size);
    margin-bottom: 3rem;
  }

  .home {
    &-content {
      padding-top: 9rem;
      gap: 3rem;
    }
    &-group {
      padding-top: 0;
    }
    &-img {
      height: 400px;
      transform: translateY(-3rem);
    }
    &-indicator {
      top: initial;
      right: initial;
      bottom: 15%;
      left: 45%;

      &::after {
        top: 0;
        height: 75px;
      }
    }
    &-details-img {
      bottom: 0%;
      right: 58%;
    }
    &-title {
      margin-bottom: var(--mb-1-5);
    }
    &-description {
      margin-bottom: var(--mb-2-5);
      padding-right: 2rem;
    }
  }

  .category {
    &-container {
      column-gap: 8rem;
    }
    &-img {
      width: 200px;
    }
  }

  .about {
    &-container {
      column-gap: 7rem;
    }
    &-img {
      width: 350px;
    }
    &-description {
      padding-right: 2rem;
    }
  }

  .trick {
    &-container {
      gap: 3.5rem;
    }
    &-content {
      border-radius: 1.5rem;
    }
    &-img {
      width: 110px;
    }
    &-title {
      font-size: var(--h3-font-size);
    }
  }

  .discount-container {
    column-gap: 7rem;
  }

  .new {
    &-content {
      width: 310px;
      border-radius: 1rem;
      padding: 2rem 0;
    }
    &-img {
      width: 150px;
    }
    &-img,
    &-subtitle {
      margin-bottom: var(--mb-1);
    }
    &-title {
      font-size: var(--h3-font-size);
    }
  }

  .footer-copy {
    margin-top: 6rem;
  }
}

@media screen and (min-width: 1200px) {
  .home {
    &-img {
      height: 420px;
    }
  }

  .swiper-pagination {
    margin-top: var(--mb-2-5);
  }

  .footer {
    &-img-one {
      width: 120px;
    }
    &-img-two {
      width: 180px;
      top: 30%;
      left: -3%;
    }
  }
}
